<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <!-- 引入vue -->
    <script src="js/vue.js"></script>
    <!--引入axios-->
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<!-- vue接管的范围 -->
<div id="app" style="margin-top: 300px">
    <table border=".5px" width="480px" align="center">
        <tr>
            <td>用户名:</td>
            <td>
                <input type="text" v-model="user.username" @focus="userTips" @blur="checkUsername">
                <span v-html="userHtml"></span>
            </td>
        </tr>
        <tr>
            <td>
                密码:
            </td>
            <td>
                <input type="password" v-model="user.password"  @focus="passTips" @blur="checkPassword">
                <span v-html="passHtml"></span>
            </td>
        </tr>
        <tr align="center">
            <td colspan="2"> <input type="button" value="登陆" @click="login"></td>
        </tr>
    </table>
</div>
<!-- 初始化vue -->
<script>
    new Vue({
        el:'#app',
        data:{
            user:{
                username:"",
                password:""
            },
            userHtml:'',
            passHtml:'',
            errorMsg:""
        },
        methods:{
            userTips(){
                this.userHtml = '<font color="blue">请输入用户名,长度在5到10位</font>'
            },
            passTips(){
                this.passHtml = '<font color="blue">请输入密码,密码长度在6到10位</font>'
            },
            checkUsername(){
                var username = this.user.username
                if(/^[a-zA-Z0-9]{5,10}$/.test(username)){
                    this.userHtml = '<font color="green">用户名OK</font>'
                    return true;
                }else{
                    this.userHtml = '<font color="red">用户名不符合要求</font>'
                    return false;
                }
            },
            checkPassword(){
                var password = this.user.password
                if(/^[a-zA-Z0-9]{6,10}$/.test(password)){
                    this.passHtml = '<font color="green">密码OK</font>'
                    return true;
                }else{
                    this.passHtml = '<font color="red">密码不符合要求</font>'
                    return false;
                }
            },
            login(){
                $.ajax({
                    url:"/users1",
                    type: "GET",
                    async: true,
                    data: user,//Json对象
                    dataType: 'json',
                    success: function (data) {

                    }
                });
            }
        }
    })
</script>
</body>
</html>